<template>
  <div>
    <van-cell>
      <template #title>
        <div class="title-box">
          <span>{{ listarr.title }}</span>

          <img class="thumb" :src="listarr.cover.images" alt v-if="listarr.cover.type === 1" />
        </div>
        <div class="thumb-box" v-if="listarr.cover.type === 3">
          <img
            class="thumb"
            :src="item"
            alt
            v-for="(item, index) in listarr.cover.images"
            :key="index"
          />
        </div>
      </template>
      <!-- label 区域的插槽 -->
      <template #label>
        <div class="label-box">
          <div>
            <span>{{ listarr.aut_name }}</span>
            <span>{{ listarr.comm_count }}评论</span>
            <span>{{ time(listarr.pubdate) }}</span>
          </div>
          <van-icon name="cross" @click="show = true" />
        </div>
      </template>
    </van-cell>
    <van-action-sheet
      v-model="show"
      @cancel="cancelFn"
      :actions="actions"
      :cancel-text="bottomText"
      @select="onSelect"
      @close="closeFn"
      get-container="body"
      />
  </div>
</template>

<script>
import { timeAgo } from '@/utils/date.js'
import { firstActions, secondAction } from '@/api/report.js'
/** 底部反馈面板的实现
 *   1 用户点击哪个分区里叉 弹出反馈面板
 *   2 切换actions数据源
 *   3 二级反馈数据的出现 取消按钮 变成返回 :cancel-text="bottomText" bottomText: '取消',
 *   4 点击 反馈垃圾内容 弹出二级分区 修改actions （this.actions = secondAction） 取消变成返回 this.bottomText = '返回'
 *   5 点击取消 判断 ottomText值 判断用户点击是否是’返回‘ 强制 让面板显示this.show = true
 *   6 让actions数据源改为secondAction bottomText改为取消
*/
export default {
  props: {
    listarr: Object
  },
  data () {
    return {
      bottomText: '取消',
      show: false, // 反馈面板显示/隐藏
      time: timeAgo, // 函数体是timeAgo
      actions: firstActions // 反馈数组
    }
  },
  methods: {
    onSelect (action, item) { // action内容 item索引
      // console.log(item)
      if (action.name === '反馈垃圾内容') {
        this.actions = secondAction
        this.bottomText = '返回'
      } else if (action.name === '不感兴趣') {
        this.$emit('feedbackid', this.listarr.art_id)
        this.show = false
      } else if (action.value !== undefined) {
        console.log(action.value)
        const arr = {
          essayId: this.listarr.art_id, // 文章ID
          typeids: action.value // 举报类型ID
        }
        // console.log(arr)
        this.$emit('reportArr', arr)
        this.show = false
      }
    },
    cancelFn () {
      if (this.bottomText === '返回') {
        this.show = true
        this.actions = firstActions
        this.bottomText = '取消'
      }

      // this.actions = firstActions
      // this.bottomText = '取消'
    },
    closeFn () {
      this.actions = firstActions
      this.bottomText = '取消'
    }
  }
}
</script>

<style scoped lang="less">
.title-box {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.label-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.label-box span {
  margin: 0 3px;
  &:first-child {
    margin-left: 0;
  }
}
.thumb {
  width: 113px;
  height: 70px;
  object-fit: cover;
}
.thumb-box {
  display: flex;
  justify-content: space-between;
}
</style>
